<template>
  <div class="tsgz-wrap">
    <dx-Wrap :name="'预警类型占比'">
      <template v-slot:content>
        <div id="yjlxzb_echarts" style="height: 100%;"></div>
      </template>
    </dx-Wrap>
  </div>
</template>
<script>
    import commonDialog from '@/components/commonDialog/common.dialog'
    import commonForm from '@/components/commonForm/commonForm.component'
    import commonWrap from '@/components/customComponents/commonWrap.component'
    import tsCol from '@/components/left/tsCol'
    import dxWrap from '@/components/customComponents/dxWrap.component'
    import API from "@/api/index.api";
    import _ from 'lodash'
    import TWEEN from '@tweenjs/tween.js'
    export default {
        components: {
            // commonDialog,
            // commonForm,
            // commonWrap,
            // tsCol,
            dxWrap,
        },
        data () {
            return {
              dataTimer: null,
              Piedata:[],
            }
        },
        methods: {
          getIndexType_pie () {
            API.indexType_pie().then(res=>{
               this.Piedata=res.content;
              this.initEcharts ();
            })
          },
          initEcharts () {
            const isScreen1920 = window.innerWidth <= 1920;
            let colorList = ['rgb(21, 70, 187)', 'rgb(12, 139, 229)', 'rgb(120,166,211)', 'rgb(225, 168, 37)', 'rgb(231, 201, 27)', 'rgb(60, 185, 180)', 'rgb(17, 187, 215)'];
            let data = this.Piedata;
            // data排序
           data =  data.sort((a, b) => {
              return a.value - b.value;
            });
            // data样式
            data.forEach((item, index) => {
              const transparentColor = colorList[index % colorList.length].replace('rgb', 'rgba').replace(')', ', 0.5)');
              item.itemStyle = {
                color: transparentColor,
                borderColor: colorList[index % colorList.length],
              };
            });
            let option = {
              // backgroundColor: '#000',
              grid: {
                containLabel: true,
                top: "5%",
                left: "5%",
                right: "5%",
                bottom: "0",
              },
              series: [
                {
                  type: "pie",
                  color: '#8E99B3',
                  silent: true,
                  clockwise: true,
                  radius: ["0%", "10%"],
                  center: ["50%", "50%"],
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  data: [0],
                },
                {
                  type: "pie",
                  color: '#8E99B3',
                  silent: true,
                  clockwise: true,
                  radius: ["15%", "16%"],
                  center: ["50%", "50%"],
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  data: [0],
                },
                {
                  grid: {
                    containLabel: true,
                    top: "5%",
                    left: "15%",
                    right: "15%",
                    bottom: "0",
                  },
                  avoidLabelOverlap: true,
                  stack: "a",
                  type: "pie",
                  radius: ["10%", "70%"],
                  center: ["50%", "50%"],
                  silent: true, // 鼠标悬浮效果
                  clockwise: true, // 鼠标悬浮效果
                  roseType: "area",
                  zlevel: 10,
                  label: {
                    show: true,
                    color: '#fff',
                    fontSize: isScreen1920 ? 16 : 45,
                    lineHeight: isScreen1920 ? 18 : 40,
                    formatter: '{percent|{d}%}\n{name|{b}}',
                    rich: {
                      percent: {
                        fontSize: isScreen1920 ? 16 : 40,
                        color: '#0be5ff',
                      },
                    }
                  },
                  labelLine: {
                    length: isScreen1920 ? 5 : 5, // Shorter lines
                    length2: isScreen1920 ? 5 : 5, // Shorter second segment
                  },
                  itemStyle: {
                    borderWidth: 1,
                  },
                  data:  data
                }
              ]
            };
            let myChart = this.$echarts.init(document.getElementById('yjlxzb_echarts'))
            myChart.setOption(option)
          }
        },
        mounted() {
          this.initEcharts();
          this.getIndexType_pie();
        },
        destroyed() {
            clearInterval(this.dataTimer)
        }
    }
</script>
<style lang="stylus">
  .tsgz-wrap{
    height: 100%;
    cursor: pointer;
    #yjlxzb_echarts {
      height: 100%;
      transform: rotateZ(0deg)
    }
    .common-custom-head {
      span{
        color: #00F6FF

      }
    }
  }
</style>
